<template>
  <div ref="echartBar" class="echart-bar"></div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

const echarts = require('echarts/lib/echarts');

@Component({
  name: "echart-bar"
  })
export default class EchartBar extends Vue {
  @Prop() options!: Charts.BarOptions;

  chart: any = null;
  chartOptions: Charts.BarOptions = {
    chartTitle: '',
    subTitle: '',
    barTitle: '',
    x: [],
    series: []
  };

  initCharts() {
    const vm: any = this;

    if(!vm.chartOptions.color){
      vm.chartOptions.color = [
        "#54A0F8",
        "#54F8A0",
        "#B28FF2",
        "#00D9BF",
        "#2975EF",
        "#DF97E2",
        "#F95771",
        "#FF8702",
        "#36BBBF",
      ]
    }

    const container: any = this.$refs.echartBar;
    const chart = echarts.init(container);
    chart.setOption({
      title: {
        text: vm.chartOptions.chartTitle,
        subtext: vm.chartOptions.subTitle,
      },
      tooltip: {},
      xAxis: {
        data: vm.chartOptions.x,
        axisLabel: {              
              interval:0,  
              rotate:40,
              color: '#484E64'
            }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
              color: '#484E64',
              formatter: '{value}.0 万'
            }
      },
      grid: {
        x: 70,
        x2: 0,
      },
      series: vm.chartOptions.series
    });
  }

  mounted() {
    this.chartOptions = Object.assign(this.chartOptions, this.options);
    this.initCharts();
  }
}
</script>
<style lang="less" scoped>
.echart-bar {
  height: 320px;
}
</style>
